var typeone=0,  //保存用户当前点击的方向
    typetwo=0,  //保存用户当前点击的分类
    level=0,    //保存用户当前点击的等级
    page=2,     //
    len,
    pageNum,
    stres,
    ndres,
    leres,
    args=[],    //args保存地址栏参数中的值
    name,       //name保存地址栏参数中的键
    totalPage,
    twotext,    //分类的内容
    levtext,
    twonum;  

$(function(){
    //获取地址栏参数
    getQueryStringArgs();
    
    //页面初次加载时获取全部的信息
    $.ajax({
       type:"post",
       url:"category_course?cid="+typeone+"&&csid="+typetwo+"&&Level=",
       dataType:"json",
       success:function(data){
    	   
    	   //为 分页 赋值
           setPages(data.pages);
           
           //为 方向 赋值
           var onelen=data.category.length; //方向数组的长度
           var onedata;     //每一个方向
           for(var i=0;i<onelen;i++){
               onedata=data.category[i].split("|"); //将方向和方向的cid分割开
                $(".stres").append($("<span id='"+onedata[1]+"'>"+onedata[0]+"</span>"));
                if(name == "Type_one"){     //如果用户点击了方向进入课程页面则为该方向加上背景
                    if(args[name] == onedata[1]){
                        var chindex=$(".stres span").index();   //获取用户点击的方向的index
                        $(".stres span").eq(chindex).addClass("cli");   //添加背景
                        typeone=chindex;    //改变当前的方向
                    }
                }
                $(".stres span").eq(typeone).addClass("cli");   //如果用户不是点击方向进入就要把方向的全部加上背景
           }
           //给 方向 绑定点击事件
           $(".stres span").each(function(){
              $(this).on("click",one);
           });
           
           //为 分类 赋值
           var twolen=data.cateogrySecond.length;   //分类数组的长度
           var twodata;     //每一个分类
           for(var i=0;i<twolen;i++){
               twodata=data.cateogrySecond[i].split("|");   //将分类和分类的csid分割开
                $(".ndres").append($("<span id='"+twodata[1]+"'>"+twodata[0]+"</span>"));
                if(name == "Type_two"){     //如果用户点击了分类进入课程页面则为该分类加上背景
                    if(args[name] == twodata[1]){
                        var chindex=$(".ndres span").index();   //获取用户点击的分类的index
                        $(".ndres span").eq(chindex).addClass("cli");   //添加背景
                        typetwo=chindex;    //改变当前的分类
                    }
                }
                $(".ndres span").eq(typetwo).addClass("cli");   //如果用户不是点击分类进入就要把分类的全部加上背景
           }
           //给 分类 绑定事件
           $(".ndres span").each(function(){
              $(this).on("click",two); 
           });
           
           //给 等级 绑定事件
           $(".leres span").each(function(){
              $(this).on("click",lev); 
           });
           
           //为 具体课程 赋值
           var coulength=data.course.length;   //课程数组的长度
           for(var i=0;i<coulength;i++){
               $(".courses").append("<div class='course' id="+data.course[i][4]+"><div class='rescon_top'><div>"+data.course[i][0]+"</div></div><a><div class='rescon_bot'><div>"+data.course[i][1]+"</div><div>"+data.course[i][2]+"</div><div>"+data.course[i][3]+"</div></div></a></div>");
           }
          //为 具体课程 绑定事件
          chcourse();
       },
       error:function(){
           alert("resource error");
       }
    });

});

//----------------------js----------------------
/*获取地址栏参数*/
function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号--->第一个是问号
    var qs=(location.search.length > 0 ? location.search.substring(1) : "");
    //取得每一项
    var items=qs.length ? qs.split("&") : [];
    var item,value;
    //逐个讲每一项添加到args对象中
    for(var i=0;i<items.length;i++){
        item=items[i].split("=");
        name=decodeURIComponent(item[0]);
        value=decodeURIComponent(item[1]);
        if(name.length){
            if("Type_one" == name){
                typeone=value;
            }else if("Type_two" == name){
                typetwo=value;
            }
            args[name]=value;
        }
    }
    return args;
}
    

//改变rescon的课程
function changcourse(){
    var sendStr;
    if(twonum == undefined){
        sendStr="cid="+typeone+"&csid="+typetwo+"&Level="+level;
    }else{
        sendStr="cid="+typeone+"&csid="+twonum+"&Level="+level;
    }
    console.log(sendStr);
    $.ajax({
       type:"post",
       url:"category_course?"+sendStr,
       dataType:"json",
       success:function(data){
           //为 分类 赋值
           $(".ndres").empty(); //将已有分类清空否则会叠加
           var twolen=data.cateogrySecond.length;   //分类的长度
           var twodata;  //每一个分类的信息
           var flag=true;     //表示分类是否是全部
           $(".ndres").append("<span>全部</span>");
           if(typetwo == 0){
               flag=false;
               $(".ndres span").eq(0).addClass("cli").siblings().removeClass("cli");
           }
           console.log(flag);
           for(var i=0;i<twolen;i++){   //在"全部"后添上每一个分类
               twodata=data.cateogrySecond[i].split("|");    //将分类和分类的csid分割开
               $(".ndres").append($("<span id='"+twodata[1]+"'>"+twodata[0]+"</span>"));

               if(flag && twodata[0] == twotext){   //从全部的分类中点的时候需要从html获取到这个html的位置
                   $(".ndres span").eq(i+1).addClass("cli").siblings().removeClass("cli");    //为该分类加上背景
               }
           }
           //给 分类 绑定事件
           $(".ndres span").each(function(){
              $(this).on("click",two);
           });
           
           //为该等级加上背景
           $(".leres span").eq(level).addClass("cli").siblings().removeClass("cli");//为等级添加背景
           
           //为 具体课程 赋值
           $(".courses").empty();   //将已有课程清空
           var coulen=data.course.length;   //课程的长度
           for(var i=0;i<coulen;i++){   //添加课程信息
               $(".courses").append("<div class='course'><div class='rescon_top'><div>"+data.course[i][0]+"</div></div><a href='#'><div class='rescon_bot'><div>"+data.course[i][1]+"</div><div>"+data.course[i][2]+"</div><div>"+data.course[i][3]+"</div></div></a></div>");
           }
           
           //为 具体课程 绑定事件
           chcourse();
           
           //为 页码 赋值
           setPages(data.pages);
       },
       error:function(){
           alert("changcourse error");
       }
    });
}


//改变 方向
function one(){
    $(this).addClass("cli").siblings().removeClass("cli");//改变背景颜色
    if(typeone != $(this).index()){     //点击不同的方向才切换
        typeone=$(this).index();
        if(0 == $(this).index()){       //方向为全部时分类和等级也要是全部
            $(".ndres span").eq(0).addClass("cli").siblings().removeClass("cli");   //为分类的全部添加背景
            $(".leres span").eq(0).addClass("cli").siblings().removeClass("cli");   //为等级的全部添加背景
            typeone=0;      //把方向置为全部
        }
        typetwo=0;          //只要点了方向就要把分类置为全部
        twonum=0;
        level=0;            //只要点了方向就要把等级置为全部
        changcourse();      //改变课程
    }
}
    
//改变 分类
function two(){
    $(this).addClass("cli").siblings().removeClass("cli");
    if(typetwo != $(this).index()){   //点击不同的分类才切换
        typetwo=$(this).index();   //获取分类的id属性
        twotext=$(this).html();    //获取分类的html
        twonum=$(this).attr("id");
        changcourse();
    }
}
           
//改变 等级
function lev(){
    $(this).addClass("cli").siblings().removeClass("cli");
    if(level!=$(this).index()){     //点击不同的等级才切换
        level=$(this).index();   //获取分类的id属性
        //levtext=$(this).index();
        changcourse();
    }
}

//点击某一课程的时候
function chcourse(){
    $(".course").each(function(){
        //$(this).find(".icon-aixin").on("click",addheart);
        $(this).click(function(){
            window.location.href="ResHome.jsp?courseId="+$(this).attr("id");
        });
    });
}

/*收藏改变爱心的颜色*/
/*var flag=false;   //是否收藏
function addheart(){
    if($(this).attr("class").indexOf("list") != -1){
        flag=false;
        $(this).removeClass("list");
    }else{
        flag=true;
        $(this).addClass("list");
    }
    $.ajax({
        type:"post",
        url:""
    })
}*/

//为 分页 赋值函数
function setPages(pages){
   $(".pages").empty();
   $(".pages").append("<span >首页</span><span>上一页</span><span>下一页</span><span>尾页</span>");
   for(var i=pages;i>0;i--){
        $(".pages span").eq(1).after($("<span class='page'>"+i+"</span>"));
   }
   totalPage=pages;
   len=parseInt($(".pages span").length);
   pageNum=$(".pages span");
   //为 1 添加背景
   $(".pages span").eq(2).addClass("pagescir");
   //如果只有1页那么 下一页 和 尾页 也变暗
   if(len == 5){
        $(".pages span").eq(len-2).css({"color":"#ccc","cursor":"auto"});
        $(".pages span").eq(len-1).css({"color":"#ccc","cursor":"auto"});
   }
   //鼠标进入 页码 出现背景
   $(".pages span").mouseover(function(){
       if($(this).index()>1 && $(this).index()<len-2){
            $(this).addClass("pagehover");
       }
   }).mouseleave(function(){
      $(this).removeClass("pagehover");
            $(this).css({"transition":"background 0.2s ease-in","border-radius":"50%"});
   });
   //绑定页码的click事件
   $(".pages span").each(function(){
       $(this).on("click",a);
   });
}

//点击改变页数
function pagesevent(){
    $.ajax({
        type:"post",
        url:"category_coursePage?cid="+typeone+"&&page="+(page-1)+"&&csid="+typetwo+"&level="+level,
        dataType:"json",
        success:function(data){            
            $(".courses").empty();
            var coulength=data.course.length;
            /*为 具体课程 赋值*/
            for(var i=0;i<coulength;i++){
               $(".courses").append("<div class='course'><div class='rescon_top'><div>"+data.course[i][0]+"</div></div><a href='#'><div class='rescon_bot'><div>"+data.course[i][1]+"</div><div>"+data.course[i][2]+"</div><div>"+data.course[i][3]+"</div></div></a></div>");
            }
            //为 具体课程 绑定事件
            chcourse();
        },
        error:function(){
            alert(".pages span error");
        }
    });
}

function a(){
    if($(this).index() == 0){               //点击 首页
        if(page > 2){
            page=2;
            ch1();
            ch3();
            $(".pages span").eq(2).addClass("pagescir").siblings().removeClass("pagescir");
            pagesevent();
        }
    }else if($(this).index() == 1){         //点击 上一页
        --page;
        if(page == 2){
            ch1();
            $(pageNum[page]).addClass("pagescir").siblings().removeClass("pagescir");
        }else if(page > 2){
            ch3();
            $(pageNum[page]).addClass("pagescir").siblings().removeClass("pagescir");
            pagesevent();
        }
    }else if($(this).index() == len-2){     //点击 下一页
        ++page;
        if(page == len-3){
            ch4();
            $(pageNum[page]).addClass("pagescir").siblings().removeClass("pagescir");
        }else if(page < len-3){
            ch3();
            ch2();
            $(pageNum[page]).addClass("pagescir").siblings().removeClass("pagescir");
            pagesevent();
        }
    }else if($(this).index() == len-1){     //点击 尾页
        if(page < totalPage){
            page=len-3;
            ch2();
            ch4();
            $(".pages span").eq(len-3).addClass("pagescir").siblings().removeClass("pagescir");
            pagesevent();
        }
    }else{                      //点击数字页数
        $(this).addClass("pagescir").siblings().removeClass("pagescir");
        page=$(this).index();
        if($(this).prev().html() == "上一页"){
            ch1();
        }else{
            ch2();
        }
        if($(this).next().html() == "下一页"){
            ch4();
        }else{
            ch3();
        }
        pagesevent();
    }
    
}

//ch1
function ch1(){
    $(".pages span").eq(0).css({"color":"#ccc","cursor":"auto"});
    $(".pages span").eq(1).css({"color":"#ccc","cursor":"auto"});
}

//ch2
function ch2(){
    $(".pages span").eq(0).css({"color":"#666","cursor":"pointer"});
    $(".pages span").eq(1).css({"color":"#666","cursor":"pointer"});    
}

//ch3
function ch3(){
    $(".pages span").eq(len-2).css({"color":"#666","cursor":"pointer"});
    $(".pages span").eq(len-1).css({"color":"#666","cursor":"pointer"});
}

//ch4
function ch4(){
    $(".pages span").eq(len-2).css({"color":"#ccc","cursor":"auto"});
    $(".pages span").eq(len-1).css({"color":"#ccc","cursor":"auto"});
}